<template>
  <div class="hot-main">
    <div class="hot-box">
      <div class="hot-title">
        <h1>热招职位</h1>
      </div>
      <div class="hot-tap">
        <ul>
          <li> IT·互联网 </li>
          <li> IT·互联网 </li>
          <li> IT·互联网 </li>
          <li> IT·互联网 </li>
          <li> IT·互联网 </li>
          <li> IT·互联网 </li>
          <li> IT·互联网 </li>
          <li> IT·互联网 </li>
          <li> IT·互联网 </li>
        </ul>
      </div>

      <div class="hot-info">
        <div class="info-row">
          <div class="info-col">
            <div class="hot-work">
              <ul>
                <li>
                  <div class="work-info">
                    <div>
                      <span>WEB前端(自研/开发)</span>
                      <i></i>
                    </div>
                    <div>8-13k·13薪资</div>
                  </div>

                  <div class="tag-info">
                    <span>深圳</span>
                    <span>3-5年</span>
                    <span>本科</span>
                  </div>

                  <div class="company-info">
                    <div class="company-left">
                      <span>
                        <img src="./images/2.png" alt="">
                      </span>
                      <span>华为</span>
                    </div>

                    <div class="company-right">
                      <span>计算机软件</span>
                      <span>|</span>
                      <span>不需要融资</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="hot-work">
              <ul>
                <li>
                  <div class="work-info">
                    <div>
                      <span>WEB前端(自研/开发)</span>
                      <i></i>
                    </div>
                    <div>8-13k·13薪资</div>
                  </div>

                  <div class="tag-info">
                    <span>深圳</span>
                    <span>3-5年</span>
                    <span>本科</span>
                  </div>

                  <div class="company-info">
                    <div class="company-left">
                      <span>
                        <img src="./images/2.png" alt="">
                      </span>
                      <span>华为</span>
                    </div>

                    <div class="company-right">
                      <span>计算机软件</span>
                      <span>|</span>
                      <span>不需要融资</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

                        <div class="hot-work">
              <ul>
                <li>
                  <div class="work-info">
                    <div>
                      <span>WEB前端(自研/开发)</span>
                      <i></i>
                    </div>
                    <div>8-13k·13薪资</div>
                  </div>

                  <div class="tag-info">
                    <span>深圳</span>
                    <span>3-5年</span>
                    <span>本科</span>
                  </div>

                  <div class="company-info">
                    <div class="company-left">
                      <span>
                        <img src="./images/2.png" alt="">
                      </span>
                      <span>华为</span>
                    </div>

                    <div class="company-right">
                      <span>计算机软件</span>
                      <span>|</span>
                      <span>不需要融资</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="hot-work">
              <ul>
                <li>
                  <div class="work-info">
                    <div>
                      <span>WEB前端(自研/开发)</span>
                      <i></i>
                    </div>
                    <div>8-13k·13薪资</div>
                  </div>

                  <div class="tag-info">
                    <span>深圳</span>
                    <span>3-5年</span>
                    <span>本科</span>
                  </div>

                  <div class="company-info">
                    <div class="company-left">
                      <span>
                        <img src="./images/2.png" alt="">
                      </span>
                      <span>华为</span>
                    </div>

                    <div class="company-right">
                      <span>计算机软件</span>
                      <span>|</span>
                      <span>不需要融资</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

                        <div class="hot-work">
              <ul>
                <li>
                  <div class="work-info">
                    <div>
                      <span>WEB前端(自研/开发)</span>
                      <i></i>
                    </div>
                    <div>8-13k·13薪资</div>
                  </div>

                  <div class="tag-info">
                    <span>深圳</span>
                    <span>3-5年</span>
                    <span>本科</span>
                  </div>

                  <div class="company-info">
                    <div class="company-left">
                      <span>
                        <img src="./images/2.png" alt="">
                      </span>
                      <span>华为</span>
                    </div>

                    <div class="company-right">
                      <span>计算机软件</span>
                      <span>|</span>
                      <span>不需要融资</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="hot-work">
              <ul>
                <li>
                  <div class="work-info">
                    <div>
                      <span>WEB前端(自研/开发)</span>
                      <i></i>
                    </div>
                    <div>8-13k·13薪资</div>
                  </div>

                  <div class="tag-info">
                    <span>深圳</span>
                    <span>3-5年</span>
                    <span>本科</span>
                  </div>

                  <div class="company-info">
                    <div class="company-left">
                      <span>
                        <img src="./images/2.png" alt="">
                      </span>
                      <span>华为</span>
                    </div>

                    <div class="company-right">
                      <span>计算机软件</span>
                      <span>|</span>
                      <span>不需要融资</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
                        <div class="hot-work">
              <ul>
                <li>
                  <div class="work-info">
                    <div>
                      <span>WEB前端(自研/开发)</span>
                      <i></i>
                    </div>
                    <div>8-13k·13薪资</div>
                  </div>

                  <div class="tag-info">
                    <span>深圳</span>
                    <span>3-5年</span>
                    <span>本科</span>
                  </div>

                  <div class="company-info">
                    <div class="company-left">
                      <span>
                        <img src="./images/2.png" alt="">
                      </span>
                      <span>华为</span>
                    </div>

                    <div class="company-right">
                      <span>计算机软件</span>
                      <span>|</span>
                      <span>不需要融资</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

                        <div class="hot-work">
              <ul>
                <li>
                  <div class="work-info">
                    <div>
                      <span>WEB前端(自研/开发)</span>
                      <i></i>
                    </div>
                    <div>8-13k·13薪资</div>
                  </div>

                  <div class="tag-info">
                    <span>深圳</span>
                    <span>3-5年</span>
                    <span>本科</span>
                  </div>

                  <div class="company-info">
                    <div class="company-left">
                      <span>
                        <img src="./images/2.png" alt="">
                      </span>
                      <span>华为</span>
                    </div>

                    <div class="company-right">
                      <span>计算机软件</span>
                      <span>|</span>
                      <span>不需要融资</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="hot-work">
              <ul>
                <li>
                  <div class="work-info">
                    <div>
                      <span>WEB前端(自研/开发)</span>
                      <i></i>
                    </div>
                    <div>8-13k·13薪资</div>
                  </div>

                  <div class="tag-info">
                    <span>深圳</span>
                    <span>3-5年</span>
                    <span>本科</span>
                  </div>

                  <div class="company-info">
                    <div class="company-left">
                      <span>
                        <img src="./images/2.png" alt="">
                      </span>
                      <span>华为</span>
                    </div>

                    <div class="company-right">
                      <span>计算机软件</span>
                      <span>|</span>
                      <span>不需要融资</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="hot-bottom">查看更多</div>
    </div>
  </div>
</template>

<script>
export default {
name:'LHotPosition'
}
</script>

<style lang='less' scoped>
ul li {
  list-style: none;
}


.hot-main{
  width: 100%;
  margin-top:60px;
  .hot-box{
    width:1200px;
    margin: 0 auto;
    // border: 1px solid darkblue;
    display: flex;
    flex-direction: column;
  }
  .hot-title{
    text-align: center;
    h1{
      font-size:32px;
      font-weight: 600;
      color: #222;
      line-height: 45px;
      margin-bottom: 12px;
    }
  }
  .hot-tap{
    height: 50px;
    white-space: nowrap;
    // border: 1px solid red;
    ul{
      display: flex;
      border-bottom: #d5d5d5 1px solid;
      margin: 0;
      padding: 0;
      li {
        font-weight: 600;
        color: #666;
        font-size: 16px;
        transition: all 0.2s linear;
        cursor: pointer;
        line-height: 50px;
        height: 50px;
        padding: 0 30px;
        position: relative;
      }
      li::after{
        width: 28px;
        height: 3px;
        background: linear-gradient(90deg,#16d9d8 0, #00bebd 100%);
        position: absolute;
        border-radius: 2px;
        bottom: -1px;
        content: '';
        left: 50%;
        z-index: 2;
        margin-left: -14px;
      }
    }
  }
  .hot-info {
    width: 1200px;
    margin: 5px auto;
    height: 300px;
    .info-row{
      .info-col{
        margin-top: 15px;
        div{
          margin-right: 15px;
        }
      }
    }
    .hot-work {
      border-radius: 12px;
      background: #fff;
      transition: all linear 0.2s;
      width: 384px;
      float: left;
      margin-top: 15px;
      &:hover {
        box-shadow: 0 16px 40px 0 rgb(138 149 158 / 20%);
      }
      ul {
        padding: 12px 0;
        box-sizing: border-box;
        margin:0 10px;
        li {
          margin:0 10px;
          cursor: pointer;
          .work-info{
            display: flex;
            justify-content: space-between;
            position: relative;
            div:nth-of-type(1){
              width: 200px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              line-height: 22px;
              font-size: 16px;
              font-weight: 500;
              color: #222;
              transition: all linear 0.2s;
            }
            div:nth-of-type(2){
              text-align: right;
              margin-right: 20px;
              font-size: 16px;
              color: #fe574a;
              white-space: nowrap;// 禁止换行
              text-overflow: ellipsis;// 当对象内文本一处时显示省略标记(...)。
              overflow: hidden;
              position: absolute;
              right: -30px;
            }
            i{
              width: 16px;
              height: 16px;
              left: 60%;
              background: url(https://img.bosszhipin.com/static/file/2022/tfguyqkgkb1651743005056.png)
                0 -16px/16px auto no-repeat;
              position: absolute;
              top:4px;
              transition: all linear 0.2s;
            }
          }
          .tag-info{
            margin-top: 10px;
            span{
              display: inline-block;
              height: 18px;
              font-size: 13px;
              font-weight: 400;
              line-height: 18px;
              color: #666;
              padding: 2px 10px;
              border-radius: 4px;
              background: #f8f8f8;
              margin-right: 10px;
            }
          }
          .company-info{
            display: flex;
            margin-top: 20px;
            .company-left{
              span{
                img{
                  width: 24px;
                  height: 24px;
                  vertical-align: middle;
                  border-radius: 2px;
                }
              }
              span:nth-of-type(2){
                display: inline-block;
                margin-left: 8px;
                font-size: 13px;
                height: 24px;
                line-height: 24px;
                color: #666;
                max-width:140px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                vertical-align: middle;
                transition: all 0.2s linear;
                &:hover{
                  color: #00a6a7;
                }
              }
            }
            .company-right{
              font-size: 13px;
              color: #666;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              height: 24px;
              line-height: 24px;
              span{
                padding: 0 5px;
              }
            }
          }
        }
        li:hover div:nth-of-type(1){
          color:#00d7c6
        }
        li:hover i {
          background: url(https://img.bosszhipin.com/static/file/2022/tfguyqkgkb1651743005056.png)
            0 0/16px auto no-repeat;
        }
      }
    }
  }
  .hot-bottom{
    width: 184px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(0, 190, 189, 0.1);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #00a6a7;
    // border: none;
    cursor: pointer;
    margin-left: 508px;
    transition: all linear 0.2s;
    margin-top: 150px;
    &:hover{
      background: #00bebd;
      color: #fff;
      border-color: #00bebd;
    }
  }
}

</style>